<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Event delegation</title>

        <style type="text/css">
            li {
                height: 50px;
            }
        </style>
    </head>
    <body>
        <ul id="parent-list">
            <li id="post-1">Item 1</li>
            <li id="post-2">Item 2</li>
            <li id="post-3">Item 3</li>
            <li id="post-4">Item 4</li>
            <li id="post-5">Item 5</li>
            <li id="post-6">Item 6</li>
        </ul>
        <script>
            // Get the element, add a click listener...
            document.getElementById("parent-list").addEventListener("click", function (e) {
                // e.target is the clicked element!
                // If it was a list item
                if (e.target && e.target.nodeName === "LI") {
                    // List item found!  Output the ID!
                    // console.log(e.target.textContent);
                    // console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
                    console.log(e.target.textContent, " was clicked!");
                }
            });
        </script>
    </body>
</html>